<!--
  - Copyright (c) 2021.  北京维数科技有限公司
  - Date :  2019/7/3
  - Author ：F12 Console=> atob("MzMxNDkxODAwQHFxLmNvbQ==")
  - Version ：1.7.0
  -->

<template>
  <el-container class="SlidingPanel" v-show="Show">
    <transition enter-active-class="animated bounceInRight" leave-active-class="animated bounceOutLeft" :duration="300">
      <el-button icon="el-icon-close" @click="ClosePanel" :key="1" v-show="Show"/>
    </transition>
    <transition enter-active-class="animated bounceInRight" leave-active-class="animated bounceOutLeft" :duration="300">
      <div :style="PanelStyle" :class="CustomClass" v-show="Show">
        <div class="wrap-with-halfboder"></div>
        <slot/>
      </div>
    </transition>
  </el-container>
</template>

<script>
  /**
   * 侧滑面板
   */
    export default {
      name: 'SliderPanel',
      props: {
        Show: {required: true, default: false},//是否显示面板(默认不显示)
        Direction: {type: String, default: 'left'},//展示方向(默认向左)
        Width: {type: [Number, String], default: 980},//面板宽度(默认500像素)
        Height: {type: [Number, String], default: 500},//面板高度(默认500像素)
        CustomClass: {type: String, default: ''},//面板默认样式
        Offset: {default: 30}//全屏时空隙
      },
      data () {
        return {
          PanelStyle: {},//面板样式(定义位置)
          CloseBtnStyle: {}//面板样式(定义位置)
        }
      },
      methods: {
        ClosePanel () {//当面板关闭(点击关闭按钮)
          this.$emit('update:Show', false)
        }
      },
      mounted () {//组件加载时
        let OffsetLeft = typeof this.Width === 'number' ? `${this.Width}px` : this.Width
        let OffsetRight = typeof this.Width === 'number' ? `${this.Height}px` : this.Height
        switch (this.Direction) {//判断面板展示方向
          case 'left'://向左
            this.PanelStyle = Object.assign({left: 'auto', width: OffsetLeft}, OffsetLeft === '100%' ? {marginRight: `-${this.Offset}px`, paddingRight: `${this.Offset}px`} : {})
            this.CloseBtnStyle = Object.assign({right: OffsetLeft}, OffsetLeft === '100%' ? {marginRight: `-${this.Offset}px`} : {})
            break
          case'right'://向右
            this.PanelStyle = {right: 'auto', width: OffsetLeft}
            this.CloseBtnStyle = {left: OffsetLeft}
            break
          case'top'://向上
            this.PanelStyle = {top: 'auto', height: OffsetRight}
            this.CloseBtnStyle = {bottom: OffsetRight, right: 0}
            break
          case'bottom'://向下
            this.PanelStyle = {bottom: 'auto', height: OffsetRight}
            this.CloseBtnStyle = {top: OffsetRight, right: 0}
            break
        }
      },
    }
</script>

<style lang="scss">
  .SlidingPanel {
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    background-color: rgba(7,16,24, 0.7);
    z-index: 1006;
  }

  .SlidingPanel > div {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    background:linear-gradient(90deg,rgba(10,23,34,1) 0%,rgba(13,29,41,1) 100%);
  }

  .SlidingPanel > button {
    z-index: 1007;
    min-width: 58px;
    height: 58px;
    position: absolute;
    right: 0;
    top: 0;
    border-radius: 0;
    border: none;
    font-size: 20px;
    color: #999;
    padding: 0;
    background: linear-gradient(-132deg, rgba(80, 227, 194, 0.3) 2em, rgba(13,29,41,1) 0);
    i{
      color: #fff;
      position: relative;
      left: 15px;
      top: -5px;
      font-size: 26px;
    }
    &:hover{
      background: linear-gradient(-132deg, rgba(219, 54, 29, 0.7) 2em, rgba(13,29,41,1) 0);
    }
  }
</style>
